<template>
    <div class="reportmian">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="数据筛选" name="1">
                <el-form :inline="true" class="divstyle" :model="selectfrom">
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.Start"
                                type="date"
                                placeholder="开始时间"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.End"
                                type="date"
                                placeholder="结束时间"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-search" @click="formdata"></el-button>
                        <el-button type="info" icon="el-icon-search" @click="thisMonth">本月</el-button>
                        <el-button type="info" icon="el-icon-search" @click="lastMonth">上月</el-button>
                        <el-button type="success" icon="el-icon-printer" v-print="printObj">打印</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="数据面板" name="2">
                <el-row>
                    <el-col align="center" style="font-size: 25px;font-weight: bold;">固远晨通科技发展有限公司人事考勤表</el-col>
                    <el-col>
                        <table class="report_data" rules=all id="wrapperAttendanceSummaryReprot">
                            <tr>
                                <td colspan="21" style="text-align:left;padding-left:12px;">
                                    统计日期：{{ newfmtDate(selectfrom.Start) }} 至 {{ newfmtDate(selectfrom.End) }}
                                </td>
                            </tr>
                            <tr>
                                <td rowspan="2">序号</td>
                                <td rowspan="2">部门</td>
                                <td rowspan="2">姓名</td>
                                <td rowspan="2">应出勤天数</td>
                                <td rowspan="2">内勤天数</td>
                                <td colspan="3">出差</td>
                                <td colspan="6">请假（天）</td>
                                <td rowspan="2">迟到<br>/次</td>
                                <td rowspan="2">早退<br>/次</td>
                                <td rowspan="2">缺卡<br>/次</td>
                                <td rowspan="2">旷工<br>/次</td>
                                <td colspan="3">加班时长（小时）</td>
                            </tr>
                            <tr>
                                <td>起始时间</td>
                                <td>出差地点</td>
                                <td>天数</td>
                                <td>事假</td>
                                <td>病假</td>
                                <td>年假</td>
                                <td>婚假</td>
                                <td>丧假</td>
                                <td>产假</td>
                                <td>工作日</td>
                                <td>周末</td>
                                <td>法定假日</td>
                            </tr>
                            <tbody id="report_data">

                            </tbody>
                        </table>
                    </el-col>
                </el-row>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";

    export default {
        name: "AttendanceSummaryReprot",
        props:{
            AllDepartment:{
                type:Array,
                required:true
            }
        },
        data(){
            return{
                activeNames: ['1','2'],
                selectfrom:{
                    Start: new Date(),
                    End: new Date(),
                },
                tableData:[],
                wrapper: {
                    width: "90%",
                    height: "90%",
                    margin: "auto",
                },
                printObj: {
                    id: "wrapperAttendanceSummaryReprot",  //打印标签的id
                    popTitle: '固远晨通科技发展有限公司人事考勤表',  //文件标题
                    extraCss: 'http://www.guyuanct.com/',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                },
            }
        },
        created() {
            this.InitDate();
            this.formdata()
        },
        methods: {
            InitDate() {
                const endDate = this.getFormatDate(new Date()).substr(0, 11)
                const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 30)).substr(0, 11)
                this.selectfrom.Start = beginDate;
                this.selectfrom.End = endDate;
            },
            // 获取当前时间
            getFormatDate(date) {
                var month = date.getMonth() + 1
                var strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
             var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '';
                return currentDate
            },

            // 初始数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Report/GetAttendanceSummaryData',{
                    Start:this.selectfrom.Start,
                    End:this.selectfrom.End,
                }).then(res => {
                    loadding.close();
                    if (res.data.length>0){
                        this.tableData = res.data
                        this.DataBind()
                    }else{
                        let html='<tr><td colspan="21">无数据，请检查是否有本月的考勤设置数据</td></tr>'
                        document.getElementById('report_data').innerHTML=html
                    }
                }).catch(() => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //获取对应部门名字
            GetDepartmentName(value){
                let name=''
                if (value!=0){
                    for(let i=0;i<this.AllDepartment.length;i++){
                        if (this.AllDepartment[i].Id == value){
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取人员名称
            GetUserName(value){
                let name=''
                if (value!=0){
                    for(let i=0;i<this.$store.state.AllUsers.length;i++){
                        if (this.$store.state.AllUsers[i].Id == value){
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //数据绑定
            DataBind(){
                let html=''
                this.tableData.forEach((d,index)=>{
                    html += '<tr><td>'+  (index + 1) +'</td>'
                        + '<td style="padding: 15px 0px">'+ this.GetDepartmentName(d.DepartmentId) +'</td>'
                        + '<td>'+ this.GetUserName(d.UserId) +'</td>'
                        + '<td>'+ d.AttendanceDays  +'</td>'
                        + '<td>'+ d.ActualAttendanceDays   +'</td>'
                        + '<td>'+ (d.TravelDate = d.TravelDate || "") +'</td>'
                        + '<td>'+ (d.TravelAddress = d.TravelAddress || "") +'</td>'
                        + '<td>'+ (d.TravelDays = d.TravelDays || "") +'</td>'
                        + '<td>'+ (d.ComLeave = d.ComLeave || "")  +'</td>'
                        + '<td>'+ (d.SickLeave = d.SickLeave || "") +'</td>'
                        + '<td>'+ (d.AnnualLeave = d.AnnualLeave || "")  +'</td>'
                        + '<td>'+ (d.MarriageLeave = d.MarriageLeave || "")  +'</td>'
                        + '<td>'+ (d.BereavementLeave = d.BereavementLeave || "")  +'</td>'
                        + "<td>" + (d.MaternityLeave = d.MaternityLeave || "") + "</td>"
                        + "<td>" + (d.LateCount = d.LateCount || "") + "</td>"
                        + "<td>" + (d.LeaveEarlyCount = d.LeaveEarlyCount || "") + "</td>"
                        + "<td>" + (d.CardShortageCount = d.CardShortageCount || "") + "</td>"
                        + "<td>" + (d.AbsenteeismCount = d.AbsenteeismCount || "") + "</td>"
                        + "<td>" + (d.WorkingDayOvertime = d.WorkingDayOvertime || "") + "</td>"
                        + "<td>" + (d.WeekendOvertime = d.WeekendOvertime || "") + "</td>"
                        + "<td>" + (d.LegalHolidaysOvertime = d.LegalHolidaysOvertime || "") + "</td></tr>"
                })
                document.getElementById('report_data').innerHTML=html
            },
            newfmtDate(value){
                let d = new Date(value)
                let newday = d.getFullYear()+'-'+ (d.getMonth()+1)+ '-' + d.getDate()
                return newday
            },
            //本月
            thisMonth(){
                let data = new Date( this.selectfrom.End.getFullYear(),this.selectfrom.End.getMonth()+1,0).getDate()
                this.selectfrom.Start.setDate(1)
                this.selectfrom.End.setDate(data)
                this.formdata()
            },
            //上个月
            lastMonth(){
                let data = new Date( this.selectfrom.End.getFullYear(),this.selectfrom.End.getMonth(),0).getDate()
                this.selectfrom.Start.setMonth(this.selectfrom.Start.getMonth()-1)
                this.selectfrom.Start.setDate(1)
                this.selectfrom.End.setMonth(this.selectfrom.End.getMonth()-1)
                this.selectfrom.End.setDate(data)
                this.formdata()
            }
        }
    }
</script>

<style scoped>
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }
    td{
        padding: 15px 0px;
    }
</style>
